.borderstyle{
    width:50px;
    height:100px;
    margin:10px;
    float:left;
    font-size:13px;
}
#bs1{border-style:none;}
#bs2{border-style:solid;}
#bs3{border-style:solid dashed;}
#bs4{border-style:solid dashed double;}
#bs5{border-style:solid dashed double dotted;}
#bs6{border-style:groove;}
#bs7{border-style:ridge;}
#bs8{border-style:inset;}
#bs9{border-style:outset;}
#bs10{border-top-style:solid;border-right-style:dashed;border-bottom-style:double;border-left-style:dotted;}

.borderwidth{
    width:50px;
    height:100px;
    margin:10px;
    float:left;
    font-size:13px;
    border-style: solid;
}
#bw1{border-width:thin;}
#bw2{border-width:2px 4px;}
#bw3{border-width:2px 4px 6px;}
#bw4{border-width:2px 4px 6px 8px;}
#bw5{border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px;}

.bordercolor{
    width:50px;
    height:100px;
    margin:10px;
    float:left;
    font-size:13px;
    border-style: solid;
    border-width:10px;
}
#bc1{border-color:#C47678;border-style: groove;}
#bc2{border-color:#c47678 #cd61dc;}
#bc3{border-color:#c47678 #cd61dc #b6ce44;}
#bc4{border-color:#c47678 #cd61dc #b6ce44 #fdda04;}
#bc5{border-top-color:#c47678;border-right-color:#cd61dc;border-bottom-color:#b6ce44;border-left-color:#fdda04;}

.border{
    width:50px;
    height:100px;
    margin:10px;
    float:left;
    font-size:13px;
}
#b1{border-top:double;border-right:solid #b6ce44;border-bottom:dotted 2px;border-left:ridge #b7d5ef 8px;}
#b2{border:dashed #047c3f 8px;}

.padding{
    width:50px;
    height:100px;
    float:left;
    font-size:13px;
    border:1px solid #000;
}
#p1{padding-top:10px;}
#p2{padding-left:10px;}
#p3{padding:10px 5px 10px;}

.margin{
    width:50px;
    height:100px;
    font-size:13px;
    border :1px solid #000;
}
#m1{ margin-top:10px;}
#m2{margin-right:10px;margin-left:10px;}
#m3{margin-bottom:10px;}
#m4{margin:20px;}
#m5{margin:0px 0px 30px 5px;}

.borderradius{
    width:100px;
    height:100px;
    font-size:13px;
    float:left;
    margin:60px;
    border:1px solid #000;
}
#br1{border-radius:20px;}
#br2{border-radius:20px 80px;}
#br3{border-radius:10px 20px 30px;}
#br4{border-radius: 10px 30px 20px 5px;}

.boxshadow{
    width:100px;
    height:100px;
    font-size:13px;
    float:left;
    margin:60px;
    border:1px solid #000;
}
#bs1{box-shadow: 4px 20px 20px 12px #61f7eb;background-color:#ec3b58;}
#bs2{box-shadow:0 0 20px 20px #9366f7;}
#bs3{box-shadow:  0 0 20px 20px #9366f7 inset;}
#bs4{box-shadow: 0 0 2px 2px #56f79a,0 0 12px 14px #fcf276,0 0 2px 7px #5fcff5, 0 0 22px 21px #f34ddf;}

.div1{
    width:200px;
    height:150px;
    padding-right:30px;
    background:#99f;
    border:4px solid #00f;
    box-sizing: content-box;
}
.div2{
    width:200px;
    height:150px;
    padding-right:30px;
    background:#99f;
    border:4px solid #00f;
    box-sizing: border-box;
    margin-top:10px;
}

.borderimage{
    padding:30px;
    margin:20px;
    font-size:14px;
    width:200px;
    height:100px;
}

#bi1{
    border-image-source:url("border.png");
    border-image-slice:20 ;
    border-image-width:auto;
    border-image-repeat:repeat;
}
#bi2{
    border-image-source:url("border.png");
    border-image-slice:30;
    border-image-width:auto;
    border-image-repeat:stretch;
}
#bi3{
    border-image-source:url("border.png");
    border-image-slice:30;
    border-image-width:auto;
    border-image-repeat:round;
}

.div3{
    width:100px;
    height:100px;
    border:1px solid #000;
}

.span{
    width:100px;
    height:100px;
    border:1px solid #000;
}

img{
    width:100px;
    height:200px;
    border:3px solid #000;
}

.span2{
    display:block;
    width:200px;
    height:100px;
    border:1px solid #000;
    margin:5px;
}
.div4{
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid #000;
    margin:5px;
}

.father{
    width:600px;
    height:300px;
    border:1px solid #000;
    margin:10px;
    padding:10px;
}
#left{
    width:100px;
    border:1px solid #000;
    float:left;
}

#right{
    width:100px;
    border:1px solid #000;
    float:right;
}
#left1{
    width:100px;
    border:1px solid #000;
    float:left;
}

#right1{
    width:100px;
    border:1px solid #000;
    float:right;
}
#static{
    width:200px;
    height:100px;
    border:1px solid #000;
    clear:both;
}

.position{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#static1{
    position:static;
    background:#e994e6;
    color:#fff;
}
#rel1{
    position:relative;
    top:60px;
    left:30px;
    background:#c2efd0;
    color:#000;
}
#static2{
    position:static;
    background:#add0f5;
    color:#fff;
}
b{border:1px solid red;}
.b2{position:relative;
left:80px;
top:60px;}

.mydiv{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#d1{
    position:absolute;
    top:100px;
    right:30px;
    background:#ba9578;
    color:#fff;
}
#d2{
    position:relative;
    top:60px;
    left:30px;
    background:#cef091;
    color:#000;
}
#d3{
    position:static;
    background:#70c17f;
    color:#fff;
}
b{
    border:1px solid red;
}
.b2{
    position:absolute;
    left:80px;
    top:120px;
}

.dd{
    width:200px;
    height:100px;
    margin:10px;
    padding:5px;
    border:1px solid #000;
    text-align:center;
    float:left;
    background:#d5b9f3;
}
#dd1{
    overflow:visible;
}
#dd2{
    overflow:hidden;
}
#dd3{
    overflow:scroll;
}
#dd4{
    overflow:auto;
}